<template>
  <view class="container">
    <form @submit="handleSubmit">
      <!-- 留言内容 -->
      <view class="form-section">
        <view class="section-title">留言内容</view>
        <textarea 
          v-model="form.content" 
          placeholder="请输入您的留言内容，我们将尽快回复"
          maxlength="500"
        ></textarea>
        <text class="word-count">{{form.content.length}}/500</text>
      </view>

      <!-- 联系方式 -->
      <view class="form-section">
        <view class="section-title">联系方式</view>
        <view class="form-item">
          <text class="label">姓名</text>
          <input type="text" v-model="form.name" placeholder="请输入您的姓名" />
        </view>
        <view class="form-item">
          <text class="label">手机号</text>
          <input type="number" v-model="form.phone" placeholder="请输入您的手机号" />
        </view>
        <view class="form-item">
          <text class="label">邮箱</text>
          <input type="text" v-model="form.email" placeholder="请输入您的邮箱" />
        </view>
      </view>

      <!-- 图片上传 -->
      <view class="form-section">
        <view class="section-title">图片上传（选填）</view>
        <view class="upload-list">
          <view class="upload-item" v-for="(item, index) in form.images" :key="index">
            <image :src="item" mode="aspectFill"></image>
            <view class="delete-btn" @tap="deleteImage(index)">
              <uni-icons type="close" size="20" color="#fff"></uni-icons>
            </view>
          </view>
          <view class="upload-item add" @tap="chooseImage" v-if="form.images.length < 3">
            <uni-icons type="camera-filled" size="30" color="#999"></uni-icons>
            <text>上传图片</text>
          </view>
        </view>
      </view>

      <!-- 提交按钮 -->
      <button class="submit-btn" form-type="submit">提交留言</button>
    </form>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        content: '',
        name: '',
        phone: '',
        email: '',
        images: []
      }
    }
  },
  methods: {
    chooseImage() {
      uni.chooseImage({
        count: 3 - this.form.images.length,
        success: (res) => {
          this.form.images = [...this.form.images, ...res.tempFilePaths]
        }
      })
    },
    deleteImage(index) {
      this.form.images.splice(index, 1)
    },
    handleSubmit() {
      // 表单验证
      if (!this.form.content) {
        uni.showToast({
          title: '请输入留言内容',
          icon: 'none'
        })
        return
      }
      if (!this.form.name) {
        uni.showToast({
          title: '请输入姓名',
          icon: 'none'
        })
        return
      }
      if (!this.form.phone) {
        uni.showToast({
          title: '请输入手机号',
          icon: 'none'
        })
        return
      }

      uni.showLoading({
        title: '提交中...'
      })

      // TODO: 提交留言
      setTimeout(() => {
        uni.hideLoading()
        uni.showToast({
          title: '提交成功',
          icon: 'success'
        })
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      }, 2000)
    }
  }
}
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 30rpx;
}

.form-section {
  margin-top: 20rpx;
  padding: 30rpx;
  background-color: #fff;
  
  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 30rpx;
  }
  
  .form-item {
    margin-bottom: 30rpx;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .label {
      font-size: 28rpx;
      color: #333;
      margin-bottom: 20rpx;
      display: block;
    }
    
    input {
      width: 100%;
      height: 88rpx;
      background-color: #f5f5f5;
      border-radius: 8rpx;
      padding: 0 20rpx;
      font-size: 28rpx;
    }
  }
  
  textarea {
    width: 100%;
    height: 200rpx;
    background-color: #f5f5f5;
    border-radius: 8rpx;
    padding: 20rpx;
    font-size: 28rpx;
  }
  
  .word-count {
    font-size: 24rpx;
    color: #999;
    text-align: right;
    margin-top: 10rpx;
  }
}

.upload-list {
  display: flex;
  flex-wrap: wrap;
  
  .upload-item {
    width: 200rpx;
    height: 200rpx;
    margin-right: 20rpx;
    margin-bottom: 20rpx;
    position: relative;
    
    &:nth-child(3n) {
      margin-right: 0;
    }
    
    image {
      width: 100%;
      height: 100%;
      border-radius: 8rpx;
    }
    
    .delete-btn {
      position: absolute;
      top: -20rpx;
      right: -20rpx;
      width: 40rpx;
      height: 40rpx;
      background-color: rgba(0, 0, 0, 0.5);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    &.add {
      background-color: #f5f5f5;
      border-radius: 8rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      
      text {
        font-size: 24rpx;
        color: #999;
        margin-top: 10rpx;
      }
    }
  }
}

.submit-btn {
  margin: 40rpx 30rpx;
  height: 88rpx;
  line-height: 88rpx;
  text-align: center;
  background-color: #1890ff;
  color: #fff;
  border-radius: 44rpx;
  font-size: 32rpx;
}
</style> 